<template>
    <div class="wrapper">
        <div
            style="margin: 200px auto; background-color: #fff; width: 350px; height: 300px; padding: 20px;
                                                                                                                                                                                                                                                                                    border-radius: 10px;">
            <div style="margin: 20px 0; text-align: center; font-size: 34px;">
                <div style="height: 59px;line-height: 60px; text-align: center;">
                    <img height="70px" width="90px" src="@/assets/logo.png" alt="">
                </div>
            </div>
            <div v-if="!weixinFlog">
                <el-input size="medium" style="margin: 10px auto;" prefix-icon="el-icon-user"
                    v-model="user.mobile"></el-input>
                <el-input size="medium" style="margin: 10px auto;" prefix-icon="el-icon-lock" v-model="user.password"
                    show-password></el-input>
            </div>
            <div v-if="weixinFlog" style="height: 100%;margin: auto;text-align: center;">
                <qriously :value="imgUrl" :size="200" />
            </div>

            <div>
                <el-button v-if="!weixinFlog" round size="medium" class="button1" style="margin: 10px auto;" type="primary"
                    @click="login()">登陆</el-button>
                <el-button v-if="!weixinFlog" round size="medium" class="button1 " type="warning"
                    @click="weixinLogin()">微信登陆</el-button>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "Login",
    data() {
        return {
            weixinFlog: false,
            user: {
                mobile: '',
                password: ''
            },
            initQCode: '你自定定义的值',
            qrCodeReturnUrl: '122',
            imgUrl: "小伙子不要扫那么快，等一哈儿嘛",
            tempUserId: "",
        }
    },
    methods: {
        login() {
            this.request.post("/sys/login", this.user).then(res => {
                if (res.code == 200) {
                    localStorage.setItem("token", res.data.token)
                    localStorage.setItem("userInfo", JSON.stringify(res.data.user))
                    const curr = localStorage.getItem('preRoute')
                    if (curr == null) {
                        this.$router.push({ path: "/" });
                    } else {
                        this.$router.push({ path: curr });
                    }
                    this.$message.success("登陆成功")
                }
            })

        },
        weixinLogin() {
            this.weixinFlog = true;
            this.request("sys/wx").then(res => {
                this.imgUrl = res.data.qrCodeReturnUrl;
                this.tempUserId = res.data.temUserId;
                this.getLogin(res.data.temUserId)

            })
        },
        getLogin(temUserId) {
            this.request.get("sys/wx/login?temUserId=" + temUserId).then(res => {
                if (res.code == 200) {
                    localStorage.setItem("token", res.data.token)
                    localStorage.setItem("userInfo", JSON.stringify(res.data.user))
                    this.$message.success("登陆成功")
                    const curr = localStorage.getItem('preRoute')
                    if (curr == null) {
                        this.$router.push({ path: "/" });
                    } else {
                        this.$router.push({ path: curr });
                    }
                } else {
                    location.reload()
                }
            })
        },
    },
    // mounted() {
    //     this.timer = window.setInterval(() => {
    //         setTimeout(() => {
    //             this.getLogin()
    //         }, 0)
    //     }, 3000)
    // },
    // methods: {

    // },
    // destroyed() {
    //     window.clearInterval(this.timer)
    // }
}
</script>
<style>
.wrapper {
    height: 100vh;
    background-image: linear-gradient(to bottom right, #FC466B, #3F5EFB);
    overflow: hidden;
}


.button1:hover {
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
</style>